<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:fragment="head(title)"><!--title传参-->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title th:replace="${title}"></title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.10/semantic.min.css">
    <link rel="stylesheet" th:href="@{/css/me.css}"> <!--引入自定义CSS样式-->
    <link rel="stylesheet" th:href="@{/css/typo.css}">
    <link rel="stylesheet" th:href="@{/css/animate.css}">
    <link rel="stylesheet" th:href="@{/lib/prism/prism.css}">
    <link rel="stylesheet" th:href="@{/lib/tocbot/tocbot.css}">
</head>
<body>
<!--导航-->
<nav th:fragment="menu(n)" class="ui inverted attached segment me-padded-tb-mini me-shadow-small"> <!--引入css样式-->
    <div class="ui container">
        <div class="ui inverted secondary menu stackable"><!--stackable可堆叠，解决手机访问-->
            <h2 class="ui teal header item">blog</h2> <!--item为menu中的一个条目-->
            <a href="./index.html" th:href="@{/}" class="m-item item me-mobile-hide" th:classappend="${n==1} ? 'active'"><!--判断-->
                <i class="home icon"></i>
                首页
            </a>
            <a th:href="@{/types/-1}" href="./types.html" class="m-item item me-mobile-hide" th:classappend="${n==2} ? 'active'"><i class="idea icon"></i>分类</a><!--m-item，在JQuery里获取样式-->
            <a th:href="@{/tags/-1}" href="./tags.html" class="m-item item me-mobile-hide" th:classappend="${n==3} ? 'active'"><i class="tags icon"></i>标签</a>
            <a th:href="@{/archives}" href="./archives.html" class="m-item item me-mobile-hide" th:classappend="${n==4} ? 'active'"><i class="tags icon"></i>归档</a>
            <a th:href="@{/about}" href="./about.html" class="m-item item me-mobile-hide" th:classappend="${n==5} ? 'active'"><i class="info icon"></i>关于我</a>
            <a id="loginAndOut" href="#" target="_blank" class="m-item me-blue item me-mobile-hide"
               th:href="${session.user}==null ? @{/admin} : @{/admin/logout}">
                <!--这里需要session.user否则都是null，神奇-->
                <i class="icon" th:classappend="${session.user}==null ? user : bed"></i><span th:text="${session.user}==null ? '登录' : '注销'"></span>
            </a>
            <div class="m-item right item me-mobile-hide">
                <form name="search" action="#" th:action="@{/search}" method="post">
                    <div class="ui icon input">
                        <label>
                            <input name="query" type="text" placeholder="Search..." th:value="${query}">
                        </label>
                        <!--回车自动就能提交，图标加入Onclick事件-->
                        <i onclick="document.forms['search'].submit()" class="search link icon"></i>
                    </div>
                </form>
            </div>

        </div>
    </div>
    <a href="#" class="ui black icon button me-top-right me-mobile-show menu toggle"> <!--手机端菜单图标, menu toggle获取点击事件-->
        <i class="sidebar icon"></i>
    </a>
</nav>

<!--底部footer-->
<footer th:fragment="footer" class="ui inverted vertical segment me-padded-tb-max"><!--vertical消除圆角，用attached好像也行-->
    <div class="ui center aligned container"><!--居中-->
        <div class="ui inverted divided grid stackable stackable"><!--grid stackable默认均匀分成16份, divided分割线-->
            <div class="three wide column">
                <div class="ui inverted link list">
                    <div class="item">
                        <img th:src="@{/images/wechat.jpg}" class="ui rounded image" alt="" style="width: 110px"><!--alt规定图片无法显示时的替代文本-->
                    </div>
                </div>
            </div>
            <div class="three wide column">
                <h4 class="ui inverted header me-text-space me-opacity-mini">最新博客</h4><!--标题-->
                <div id="newBlog-container">
                    <div class="ui inverted link list" th:fragment="newBlogList">
                        <a href="#" th:href="@{/blog/{id}(id=${blog.id})}" target="_blank" class="item me-text-thin me-text-lined" th:each="blog: ${newBlogs}" th:text="${blog.title}">用户故事</a>
                    </div>
                </div>
            </div>
            <div class="three wide column">
                <h4 class="ui inverted header me-text-space me-opacity-mini">联系我</h4><!--标题-->
                <div class="ui inverted link list">
                    <!--动态从配置文件加载-->
                    <a href="#" class="item me-text-thin me-text-lined" th:text="#{index.email}">Email: stg1205@163.com</a>
                    <a href="#" class="item me-text-thin me-text-lined">QQ: 1014922487</a>
                </div>
            </div>
            <div class="seven wide column">
                <h4 class="ui inverted header me-text-space me-opacity-mini">介绍</h4>
                <p class="me-text-space me-text-thin me-text-lined me-opacity-mini">
                    20fall ECE研究生，转行不易，前途迷茫。研究方向：audio signal processing, state recognition。
                </p>
                <p class="me-text-space me-text-thin me-text-lined me-opacity-mini">
                    这是@泽的第一个个人博客，基于b站教程”Springboot开发一个小而美的个人博客“搭建。
                    后续会继续完善前端页面，优化后端逻辑。
                </p>
            </div>
        </div>
        <div class="ui inverted section divider"></div>
        <p class="me-text-space me-opacity-tiny">Copyright © 1997-2020 泽宝宝 All Rights Reserved</p>
        <div style="display: none" id="busuanzi_container_site_uv" class="me-margin-top-small me-text-space me-opacity-tiny">
            已有
            <span id="busuanzi_value_site_uv"></span>
            人到访
        </div>
    </div>

</footer>

<th:block th:fragment="script">
<!--    <script-->
<!--            src="https://code.jquery.com/jquery-3.1.1.min.js"-->
<!--            integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="-->
<!--            crossorigin="anonymous"></script>-->
    <script th:src="@{/js/jquery-3.5.1.min.js}"></script>
    <script src="https://cdn.jsdelivr.net/semantic-ui/2.2.10/semantic.min.js"></script>
    <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
</th:block>
</body>
</html>